<template>
  <view>
    <view class="whole">
    <u-back-top :scroll-top="scrollTop" top="1000" class="totop"></u-back-top>
    <view style="padding: 1rpx 0">
      <block v-for="(item, index) in zixunlist" :key="index">
        <view class="listwhole" @click="todetail(index)">
          <view class="list_left">
            <text class="list_left_top">{{ item.title }}</text>
            <view class="">
              <text class="list_left_center">{{ item.content }}</text>
              <text class="list_left_bottom">{{ item.created_at }}</text>
            </view>
          </view>
          <view class="list_right">
            <image :src="item.cover" mode="" class="list_right_img"></image>
          </view>
        </view>
      </block>
    </view>

    <empty :show.sync="zixunlist.length == 0"></empty>
  </view>
  <tabbar :key="gettoken" :current="3"></tabbar>
  </view>
</template>

<script>
import api from "../../api/api";
import tabbar from "../../components/tabbar/tabbar.vue";
export default {
  data() {
    return {
      scrollTop: 0,
      page: 1,
      zixunlist: [],
      gettoken:null
    };
  },
  components:{
    tabbar
  },
  onShow() {
    // this.page = 1;
    // this.list()
    this.gettoken = uni.getStorageSync("token")
  },
  onLoad() {
    this.list();
  },
  onReachBottom() {
    this.page++;
    this.list();
  },
  onPullDownRefresh() {
    this.page = 1;
    this.list();
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  methods: {
    async list() {
      let res = await api.zixunlist({
        query: {
          page: this.page,
        },
      });
      if (res.code == 0) {
        uni.stopPullDownRefresh();
        if (this.page == 1) {
          this.zixunlist = res.data;
        } else {
          if (res.data.length > 0) {
            this.zixunlist = [...this.zixunlist, ...res.data];
            // res.data.forEach((el,index) => {
            // 	this.zixunlist.push(res.data[index])
            // })
          }
        }
      }
    },
    todetail(index) {
      uni.navigateTo({
        url: `../InformationDetails/InformationDetails?id=${this.zixunlist[index].id}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.whole {
  width: 100%;
  height: 100%;
  background-color: $bg-color1;
  min-height: 100vh;
}
.totop {
  position: fixed;
  right: 0;
  bottom: 300rpx;
}
.listwhole {
  display: flex;
  margin: 24rpx 30rpx;
  border: 2rpx solid $bg-color3;
  border-radius: 12px;
  background-color: $bg-color3;
  // align-items: center;
  align-items: flex-start;

  justify-content: space-between;
  .list_left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 24rpx;
    height: 176rpx;
    .list_left_top {
      font-size: 28rpx;
      color: #ffffff;
      font-weight: 500;
      margin-bottom: 24rpx;

      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2; // 控制多行的行数
      -webkit-box-orient: vertical;
    }
    .list_left_center {
      font-size: 24rpx;
      font-weight: 400;
      color: #bbbbbe;
      margin-bottom: 5rpx;
      overflow: hidden;
      -webkit-line-clamp: 1;
      text-overflow: clip;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    .list_left_bottom {
      font-size: 24rpx;
      font-weight: 400;
      color: #bbbbbe;
    }
  }
  .list_right {
    margin: 24rpx;
    .list_right_img {
      width: 220rpx;
      height: 176rpx;
      border-radius: 24rpx;
    }
  }
}
</style>
